<template>
  <div class="search">
    <el-form inline>
      <el-form-item label="部门：">
        <el-cascader
          v-model="value.department_id"
          :options="dept"
          style="width: 200px;"
          clearable
          :props="{
            value: 'id',
            label: 'name',
            checkStrictly: true,
          }"
        />
      </el-form-item>

      <el-form-item label="用餐状态：">
        <el-select
          v-model="value.isEat"
          placeholder="请选择"
          style="width: 200px;"
          clearable
        >
          <el-option
            v-for="item in isEatOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="日期：">
        <el-date-picker
          v-model="value.time"
          style="width: 328px;"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="handleSearch"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getDept } from '@/api/basic'
import { isObjectEqual } from '@/utils/kris_utils'

export default {
  name: '',
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dept: [],
      isEatOptions: [
        { value: 0, label: '未用餐' },
        { value: 1, label: '已用餐' }
      ]
    }
  },
  computed: {

  },
  created() {
    this.getDepts()
  },
  methods: {
    async getDepts() {
      const res = await getDept()

      if (isObjectEqual({}, res.data)) {
        this.dept = []
        return
      }

      this.dept = res.data
    },
    handleSearch() {
      this.$emit('search', this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  ::v-deep(.el-form-item) {
    margin-bottom: 30px;
    margin-right: 20px;
    .el-form-item__label {
      font-weight: 400;
    }
  }

}
</style>
